
import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { 
  BookOpen, 
  Video, 
  FileText, 
  Search, 
  Filter,
  Download,
  Play,
  Clock,
  Star
} from "lucide-react";

interface LearningResourceLibraryProps {
  onClose: () => void;
}

export const LearningResourceLibrary = ({ onClose }: LearningResourceLibraryProps) => {
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedSubject, setSelectedSubject] = useState("all");

  const subjects = [
    { id: "mathematics", name: "Mathematics", color: "blue" },
    { id: "science", name: "Science", color: "green" },
    { id: "english", name: "English", color: "purple" },
    { id: "history", name: "History", color: "orange" },
    { id: "arts", name: "Arts", color: "pink" }
  ];

  const resources = [
    {
      title: "Algebra Fundamentals",
      type: "video",
      subject: "mathematics",
      duration: "45 min",
      rating: 4.9,
      level: "Beginner",
      description: "Master the basics of algebraic equations and problem-solving techniques."
    },
    {
      title: "Chemistry Lab Guide",
      type: "document",
      subject: "science",
      duration: "15 min read",
      rating: 4.7,
      level: "Intermediate",
      description: "Comprehensive guide to essential chemistry laboratory procedures and safety."
    },
    {
      title: "Creative Writing Workshop",
      type: "interactive",
      subject: "english",
      duration: "30 min",
      rating: 4.8,
      level: "All Levels",
      description: "Interactive exercises to improve your creative writing skills and storytelling."
    },
    {
      title: "World War II Timeline",
      type: "document",
      subject: "history",
      duration: "20 min read",
      rating: 4.6,
      level: "Intermediate",
      description: "Detailed timeline of major events during World War II with analysis."
    },
    {
      title: "Digital Art Basics",
      type: "video",
      subject: "arts",
      duration: "60 min",
      rating: 4.9,
      level: "Beginner",
      description: "Learn the fundamentals of digital art creation using modern tools."
    }
  ];

  const getResourceIcon = (type: string) => {
    switch (type) {
      case "video": return Video;
      case "document": return FileText;
      case "interactive": return BookOpen;
      default: return FileText;
    }
  };

  const getTypeColor = (type: string) => {
    switch (type) {
      case "video": return "bg-red-100 text-red-700";
      case "document": return "bg-blue-100 text-blue-700";
      case "interactive": return "bg-green-100 text-green-700";
      default: return "bg-gray-100 text-gray-700";
    }
  };

  const filteredResources = resources.filter(resource => {
    const matchesSearch = resource.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         resource.description.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesSubject = selectedSubject === "all" || resource.subject === selectedSubject;
    return matchesSearch && matchesSubject;
  });

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="container mx-auto px-4 max-w-7xl">
        <div className="mb-8">
          <Button 
            variant="ghost" 
            onClick={onClose}
            className="mb-4 hover:bg-gray-100"
          >
            ← Back to Home
          </Button>
          
          <div className="text-center">
            <h1 className="text-4xl font-bold mb-4 text-gray-900">
              Learning Resource Library
            </h1>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Access a comprehensive collection of educational materials across all subjects. 
              Find readings, videos, exercises, and interactive content to support your learning.
            </p>
          </div>
        </div>

        {/* Search and Filter */}
        <div className="bg-white rounded-lg p-6 mb-8 shadow-sm">
          <div className="flex flex-col md:flex-row gap-4 mb-6">
            <div className="flex-1">
              <div className="relative">
                <Search className="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
                <Input
                  placeholder="Search resources..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
            <Button variant="outline" className="gap-2">
              <Filter className="w-4 h-4" />
              Advanced Filters
            </Button>
          </div>

          <Tabs value={selectedSubject} onValueChange={setSelectedSubject}>
            <TabsList className="grid w-full grid-cols-6">
              <TabsTrigger value="all">All Subjects</TabsTrigger>
              {subjects.map(subject => (
                <TabsTrigger key={subject.id} value={subject.id}>
                  {subject.name}
                </TabsTrigger>
              ))}
            </TabsList>
          </Tabs>
        </div>

        {/* Resources Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredResources.map((resource, index) => {
            const IconComponent = getResourceIcon(resource.type);
            
            return (
              <Card key={index} className="hover:shadow-lg transition-all duration-300">
                <CardHeader>
                  <div className="flex items-start justify-between mb-2">
                    <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${getTypeColor(resource.type)}`}>
                      <IconComponent className="w-5 h-5" />
                    </div>
                    <div className="flex items-center gap-1">
                      <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                      <span className="text-sm text-gray-600">{resource.rating}</span>
                    </div>
                  </div>
                  <CardTitle className="text-lg">{resource.title}</CardTitle>
                  <div className="flex gap-2 mt-2">
                    <Badge variant="outline" className="text-xs">
                      {resource.level}
                    </Badge>
                    <Badge variant="secondary" className="text-xs">
                      {subjects.find(s => s.id === resource.subject)?.name}
                    </Badge>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600 text-sm mb-4">{resource.description}</p>
                  <div className="flex items-center justify-between text-sm text-gray-500 mb-4">
                    <div className="flex items-center gap-1">
                      <Clock className="w-4 h-4" />
                      <span>{resource.duration}</span>
                    </div>
                    <span className="capitalize">{resource.type}</span>
                  </div>
                  <div className="flex gap-2">
                    <Button size="sm" className="flex-1 gap-2">
                      {resource.type === "video" ? <Play className="w-4 h-4" /> : <BookOpen className="w-4 h-4" />}
                      {resource.type === "video" ? "Watch" : "Read"}
                    </Button>
                    <Button variant="outline" size="sm">
                      <Download className="w-4 h-4" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>

        {filteredResources.length === 0 && (
          <div className="text-center py-12">
            <BookOpen className="w-16 h-16 text-gray-300 mx-auto mb-4" />
            <h3 className="text-xl font-semibold text-gray-600 mb-2">No resources found</h3>
            <p className="text-gray-500">Try adjusting your search terms or filters.</p>
          </div>
        )}
      </div>
    </div>
  );
};
